/**
 * 已保存对话管理对话框组件
 */
import React from 'react';
import {
    Dialog,
    DialogTitle,
    DialogContent,
    DialogActions,
    Button,
    List,
    ListItem,
    ListItemText,
    ListItemIcon,
    ListItemSecondaryAction,
    IconButton,
    Typography,
    Tooltip,
    alpha,
    useTheme
} from '@mui/material';
import {
    History as HistoryIcon,
    Delete as DeleteIcon
} from '@mui/icons-material';
import { SavedConversation } from '../../../types/chat';

interface SavedConversationsDialogProps {
    open: boolean;
    onClose: () => void;
    savedConversations: SavedConversation[];
    onLoadConversation: (conversation: SavedConversation) => void;
    onDeleteConversation: (conversationId: string) => void;
}

/**
 * 已保存对话管理对话框：显示、加载和删除保存的对话
 */
const SavedConversationsDialog: React.FC<SavedConversationsDialogProps> = ({
    open,
    onClose,
    savedConversations,
    onLoadConversation,
    onDeleteConversation
}) => {
    const theme = useTheme();

    return (
        <Dialog
            open={open}
            onClose={onClose}
            maxWidth="sm"
            fullWidth
        >
            <DialogTitle>保存的对话</DialogTitle>
            <DialogContent dividers>
                {savedConversations.length === 0 ? (
                    <Typography variant="body2" color="text.secondary" sx={{ p: 2, textAlign: 'center' }}>
                        暂无保存的对话
                    </Typography>
                ) : (
                    <List sx={{ pt: 0 }}>
                        {savedConversations.map((conversation) => (
                            <ListItem
                                key={conversation.id}
                                component="div"
                                sx={{
                                    borderBottom: `1px solid ${alpha(theme.palette.divider, 0.5)}`,
                                    '&:last-child': {
                                        borderBottom: 'none'
                                    },
                                    cursor: 'pointer'
                                }}
                                onClick={() => onLoadConversation(conversation)}
                            >
                                <ListItemIcon sx={{ minWidth: 36 }}>
                                    <HistoryIcon fontSize="small" color="primary" />
                                </ListItemIcon>
                                <ListItemText
                                    primary={conversation.title}
                                    secondary={
                                        <React.Fragment>
                                            <Typography variant="caption" component="span" sx={{ display: 'block' }}>
                                                章节: {conversation.chapter}
                                            </Typography>
                                            <Typography variant="caption" component="span" color="text.secondary">
                                                {new Date(conversation.timestamp).toLocaleString()}
                                            </Typography>
                                        </React.Fragment>
                                    }
                                />
                                <ListItemSecondaryAction>
                                    <Tooltip title="删除此对话">
                                        <IconButton
                                            edge="end"
                                            size="small"
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                onDeleteConversation(conversation.id);
                                            }}
                                        >
                                            <DeleteIcon fontSize="small" />
                                        </IconButton>
                                    </Tooltip>
                                </ListItemSecondaryAction>
                            </ListItem>
                        ))}
                    </List>
                )}
            </DialogContent>
            <DialogActions>
                <Button
                    onClick={onClose}
                    color="primary"
                >
                    关闭
                </Button>
            </DialogActions>
        </Dialog>
    );
};

export default React.memo(SavedConversationsDialog); 